import { Button, Descriptions } from "antd";
import "./index.less";
import { useEffect, useState } from "react";
import { isArray } from "@/utils/is";
import { useNavigate } from "react-router-dom";
import { TimeDate } from "@/utils/util";
import Icon from "@/components/Icon";
const { Item } = Descriptions;
const index = ({ register }: any) => {
	const [historyList, setHistoryList] = useState([]);
	const [historyListEnd, sethistoryListEnd] = useState([]);
	const [titleList, setTitleList] = useState([]);
	const [id, setId] = useState(-1);
	const navigate = useNavigate();
	const secondmentsFn = async () => {
		const res = await register.api(register.parameter);
		let list: any = [];
		res.list.forEach((v: any) => {
			let arr: any = [];
			register.schemas.forEach((item: any) => {
				arr = [
					...arr,
					{
						label: item.label,
						field: v[item.field]
					}
				];
			});
			list = [
				...list,
				{
					isTiem: false,
					describe: register.describe,
					contents: v[register.contents],
					list: arr
				}
			];
		});
		setTitleList(list);
		setHistoryList(list);
	};
	const navigateFn = (ticketCode: string) => () => {
		if (!register.url) return;
		navigate(register.url, {
			state: {
				ticketCode
			}
		});
	};
	const contentListFn = async (contentListItem: any, index: number) => {
		const res = await register.api(register.parameter);
		let list: any = [];
		let titleList: any = [];
		res.list.forEach((item: any) => {
			let arr: any = [];
			contentListItem.schemas.forEach((v: any) => {
				arr = [
					...arr,
					{
						label: v.label,
						field: item[contentListItem.key] ? item[contentListItem.key][v.field] : null
					}
				];
			});
			titleList = [
				...titleList,
				{
					isTiem: true,
					title: contentListItem.title,
					contents: item[contentListItem.key] ? item[contentListItem.key][register.contents] : null,
					list: arr
				}
			];
			list = [
				{
					title: contentListItem.title,
					contents: item[contentListItem.key] ? item[contentListItem.key][register.contents] : null,
					list: arr
				}
			];
		});
		setTitleList(titleList);
		index === 0 ? setHistoryList(list) : sethistoryListEnd(list);
	};

	const handaoHistory = (index: number) => () => {
		id == index ? setId(-1) : setId(index);
	};
	const time = (time: any) => {
		let str = "";
		time.forEach((item: string, index: number) => {
			if (index == time.length - 1) {
				str = str + item;
			} else {
				str = str + item + "-";
			}
		});
		return str;
	};
	useEffect(() => {
		if (register.schemas) {
			secondmentsFn();
		} else {
			register.contentList.forEach((item: object, index: number) => {
				contentListFn(item, index);
			});
		}
	}, [register.id]);

	const showFn = (historyObj: any) => {
		return (
			<>
				<div>
					<Descriptions bordered column={2} title={register.title}>
						{historyObj.list.map((item: any, index: number) => {
							return (
								<Item label={item.label} key={index}>
									{isArray(item.field) ? time(item.field) : item.field}
								</Item>
							);
						})}
					</Descriptions>
				</div>
			</>
		);
	};
	const descriptionsItem = (item: any) => {
		switch (typeof item.field) {
			case "number":
				return <>{TimeDate(item.field)}</>;
			case "boolean":
				return <>{item.field ? "yes" : "no"}</>;
			default:
				return <>{item.field}</>;
		}
	};
	const showEndFn = (histo: any) => {
		return (
			<>
				{histo.map((item: any, index: number) => {
					return (
						<div key={index}>
							<Descriptions bordered column={2} title={item.title}>
								{item.list.map((item: any, index: number) => {
									return (
										<Item label={item.label} key={index}>
											{descriptionsItem(item)}
										</Item>
									);
								})}
							</Descriptions>
						</div>
					);
				})}
			</>
		);
	};
	const historyFn = () => {
		return (
			<>
				{titleList.map((item: any, index) => {
					return (
						<div key={index}>
							<div className="herder">
								<div>
									<div></div>
									<h3 onClick={navigateFn(item.contents)} className={register.url ? "navigate" : ""}>
										<span>{item.describe}</span>
										{item.isTiem ? TimeDate(item.contents) : item.contents}
									</h3>
								</div>
								<Button
									type="link"
									onClick={handaoHistory(index)}
									icon={<Icon icon={id === index ? "ant-design:up-outlined" : "ant-design:down-outlined"} />}
								/>
							</div>
							<div style={{ display: register.schemas ? "block" : "none" }}>{id === index ? showFn(item) : ""}</div>
							<div style={{ display: !register.schemas ? "block" : "none" }}>
								{id === index ? showEndFn(historyList) : ""}
								{id === index ? showEndFn(historyListEnd) : ""}
							</div>
						</div>
					);
				})}
			</>
		);
	};
	return <div className="history">{historyFn()}</div>;
};
export default index;
